import { Example, ExampleCode } from '@/components/Example'
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'
import ThemeExample from '@/components/ThemeExample.mdx';
import {
  AcceptRejectDropZoneExample,
  DefaultDropZoneExample,
  DisabledDropZoneExample,
  DropZoneInputExample,
  DropZoneStyleExample,
  DropZoneThemeExample,
  UseDropZoneExample,
} from './examples'

## Usage

The DropZone component adds the necessary event handlers to an element and filters dropped files by file type. To get the files after they are dropped you can use the `onDropComplete` prop which is a function that has `files` and `rejectedFiles` arrays.

<Example>
  <DefaultDropZoneExample />
  <ExampleCode>
  ```tsx file=./examples/DefaultDropZoneExample.tsx
  ```
  </ExampleCode>
</Example>



### Disabled

Add an `isDisabled` prop to DropZone to make it disabled. Disabling the DropZone will remove any drag/drop handlers and style the DropZone so it looks disabled.

<Example>
  <DisabledDropZoneExample />
  <ExampleCode>
  ```tsx file=./examples/DisabledDropZoneExample.tsx
  ```
  </ExampleCode>
</Example>


### Accepted and Rejected files

DropZone.Accept, DropZone.Reject and DropZone.Default are helper components that render at different times:

* `DropZone.Accept` is visible when the user drags files that are *all* acceptable based on the `acceptedFileTypes` prop
* `Dropzone.Reject` is visible when the user drags files that *any* are not acceptable based on the `acceptedFileTypes` prop. 
* `DropZone.Default` is the default state, visible when there is no drag interaction on the DropZone. 

All of these helper components are *mutually exclusive* and cover all possible states. If the user is dragging files over the element the files will either be all acceptable or not. 

<Example>
  <AcceptRejectDropZoneExample />
  <ExampleCode>
  ```tsx file=./examples/AcceptRejectDropZoneExample.tsx
  ```
  </ExampleCode>
</Example>

### Opening the file picker

You can add a button to open the file picker by adding a hidden input and firing the click event on the input element. Using an input element will automatically disable selecting files that don't match the accepted file types. 

<Example>
  <DropZoneInputExample />
  <ExampleCode>
  ```tsx file=./examples/DropZoneInputExample.tsx
  ```
  </ExampleCode>
</Example>


## Styling

<ThemeExample component="DropZone">
  <Example>
    <DropZoneThemeExample />
    
    <ExampleCode>
    ```jsx file=./examples/DropZoneThemeExample.tsx
    ```
    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="DropZone" />

### Global styling

To override styling on all Breadcrumbs components, you can set Amplify CSS variables or use the target classes like `.amplify-dropzone` class.

<Example>
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-dropzone {
      background-color: pink;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific DropZone component or sub-component, you can use (in order of increasing specificity): a class selector and style props.

_Using a class selector:_

<Example>
  <ExampleCode>
    ```jsx
    <DropZone className="my-dropzone">
    </DropZone>
    ```
  
    ```css
    /* styles.css */
    .my-dropzone {
       background-color: pink;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <DropZoneStyleExample />
  
  <ExampleCode>
  ```jsx file=./examples/DropZoneStyleExample.tsx
  ```
  </ExampleCode>
</Example>
